<template>
    <el-row :gutter="20" style="box-sizing: border-box; margin-right: 0px;">
        <el-col :span="4" :offset="3" >
            <ul class="menus is-always-shadow" @mouseleave="hideDetail">
                <li  id="one" @mouseenter="showDetail(c)" v-for="c in categorys1" :key="c.id">{{c.name}}</li>
            </ul>
        </el-col>
        <el-col :span="13" style="position: relative;">
            <el-carousel height="430px" :interval="5000" arrow="always">
                <el-carousel-item v-for="img in images" :key="img.id" >
                        <el-image :src='img.url'></el-image>    
                </el-carousel-item> 
            </el-carousel>

            <div class="detail" @mouseover="isShowDetail=true" @mouseout="isShowDetail=false" v-show="isShowDetail" >
                <div class="detail-item">              
                        <ul v-for="c2 in categorys2.children" :key="c2.id" >
                            <!-- <li class="title">{{c2.name}}</li> -->
                            <li style="color: blue;"><h2 class="title" >{{c2.name}}</h2></li>
                            <br/>
                              
                            <ul v-for="c3 in c2.children" :key="c3.id">
                                <!-- <li>{{c3.name}}</li> -->
                                <el-link :underline="false" class="item">{{c3.name}}</el-link>
                                <br/>           
                            </ul> 
                        </ul> 
                </div>  
            </div>
        </el-col>
    </el-row>
</template>

<script>
import http from '@/utils/request'
export default {
    data(){
        return{
            isShowDetail: false,
            images:[],
            categorys1:[],
            categorys2:[],
            categorys3:[],
            children1:[]
        }
    },
    mounted(){
        http.get('/index-img').then(res =>{
            this.images = res.data.data.data
        }),
        http.get('/category').then(res =>{
            this.categorys1 = res.data.data.data
            // let depts = this.getDeptsArray(res.data.data.data)
            // let children1 = res.data.data.data.map(cc => cc.id)
            // window.console.log(depts);
        })
    },
    methods:{
        showDetail(c) {
            this.isShowDetail = true
            // window.console.log(c);
            this.categorys2 = c
        },
        hideDetail() {
            this.isShowDetail = false
        },
    }
}
</script>

<style scoped>
#one{
    color: #F56C6C;
    font-size: 20px;
}


ul.menus.is-always-shadow, .menus.is-hover-shadow:focus, .menus.is-hover-shadow:hover {
    -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
ul.menus {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    overflow: hidden;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    padding: 20px;
}
ul.menus > li {
    padding: 7px 0;
    cursor: pointer;
}
.detail {
    height: 430px;
    background-color: #f6f6f6;
    position:absolute;
    z-index: 9999;
    top: 0;
    width: 100%;
    left: -10px;
    padding: 20px;;
    box-sizing: border-box;
}
.detail .detail-item {
    margin-bottom: 10px;
}
.detail > .detail-item > .title {
    font-weight: 800;
    margin-bottom: 8px;
    
}
.detail > .detail-item .item {
    margin-right: 8px;
}
.detail > .detail-item .item:hover {
    color: #F56C6C;
}
ul >li{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
</style>